---
title: Alias
description: Une introduction aux alias avec Astro.
i18nReady: true
---

Un **alias** est une façon de créer des raccourcis pour vos imports.

Les alias peuvent aider à améliorer l'expérience de développement dans les codebases avec de nombreux dossiers ou importations relatives.

```astro title="src/pages/about/company.astro" del="../../components" del="../../assets"
---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---
```

Dans cet exemple, un développeur devra comprendre la relation de l'arborescente entre `src/pages/about/company.astro`, `src/components/controls/Button.astro`, et `src/assets/logo.png`. Et si le fichier `company.astro` devait être déplacé, ces importations devraient également être mises à jour.

Vous pouvez ajouter des alias d'importation à partir de `tsconfig.json` ou `jsconfig.json`.

```json title="tsconfig.json" ins={5-6}
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}
```

:::note
Assurez-vous que `compilerOptions.baseUrl` est défini pour que les chemins aliasés puissent être résolus.
:::

Le serveur de développement redémarrera automatiquement après ce changement de configuration. Vous pouvez maintenant importer en utilisant les alias n'importe où dans votre projet :

```astro title="src/pages/about/company.astro" ins="@components" ins="@assets"
---
import Button from '@components/controls/Button.astro';
import logoUrl from '@assets/logo.png?url';
---
```

Ces alias sont également intégrés automatiquement dans [VS Code](https://code.visualstudio.com/docs/languages/jsconfig) et d'autres éditeurs de code.
